<template>
  <div class="commentParent">
    <div v-for="(item, index) in commentList" :key="index">
      <div class="commentItem">
        <div class="userImg" style="cursor: pointer">
          <img :src="baseUrl + item.handUrl" alt />
        </div>
        <div class="commentContent">
          <p>
            <span>{{ item.uname }}</span>
          </p>
          <div>{{ item.content }}</div>
          <div>
            <span style="font-size: 0.6rem">{{ item.time }}</span>
            <span
              v-if="isAdmin"
              style="color: rgb(201, 22, 52); margin-left: 1vw"
              >id:{{ item.id }}</span
            >
          </div>

          <div class="line3">
            <span
              v-if="!isAdmin"
              class="publishs"
              @click="publishClick(item.id)"
              style="cursor: pointer"
              >回复</span
            >
            <span
              @click="delClick(item.id)"
              v-if="upId == user.id"
              style="cursor: pointer; color: rgb(201, 22, 52)"
              >删除</span
            >
          </div>
        </div>
      </div>
      <div style="padding-left: 5vw; margin-bottom: 5vh">
        <comment-item
          @PostPublish="publishClick"
          :commentChild="item.child"
          :upId="upId"
          :paId="item.id"
        ></comment-item>
      </div>
    </div>
    <p class="line-bottom">已经到底啦，去发表更多评论吧</p>

    <el-dialog
      append-to-body
      class="dialog"
      title="发表评论"
      :visible.sync="dialoger"
    >
      <span style="margin-left: 1vw">回复:</span>
      <el-input v-model="body.content"></el-input>

      <div slot="footer" class="dialog-footer">
        <el-button @click="(dialoger = false), (body.parentId = '')"
          >取 消</el-button
        >
        <el-button type="primary" @click="Reply()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commentItem from "./commentItem";
import { mapGetters } from "vuex";
export default {
  props: ["upId"],
  data() {
    return {
      commentList: null,
      body: {
        vid: '',
        uid: '',
        parentId: "",
        content: "",
      },
      dialoger: false,
    };
  },
  components: {
    commentItem,
  },
  computed: {
    ...mapGetters(["baseUrl", "isLogin", "isAdmin", "user"]),
  },
  methods: {
    async commentData() {
      const { data: res } = await this.$http.get(
        "/comments/v/" + this.$route.params.id
      );
      if (res.code == 200) {
        this.commentList = res.data;
      }
    },
    publishClick(cid) {
    
      this.body.parentId = cid;
      this.dialoger = true;
    },
    async delClick(cid) {
      const { data: res } = await this.$http.get("/comments/del/" + cid);
      if (res.code == 200) {
        this.$msg.fail("删除成功");
      }
    },
    async Reply() {
      if (!this.isLogin) {
        this.$msg.fail("请先登录");
        return;
      }

      if (this.body.content.length < 1) {
        this.$msg.fail("内容不能为空");
        return;
      }

      this.body.vid = this.$route.params.id;
      this.body.uid = this.user.id;

      console.log( this.body);

      const { data: res } = await this.$http.post("/comments", this.body);
      if (res.code == 200) {
        this.$msg.fail("回复成功");
        this.body.content = "";
      }
      this.dialoger = false;
    },
  },
  created() {
    this.commentData();

  },
};
</script>

<style lang="less" scoped>
.commentParent {
  margin-left: 10vw;
  width: 60%;
  padding: 0.3vw 2.778vw;
  > div {
    border-bottom: 0.1vw solid #e7e7e7;
  }
  .commentItem {
    display: flex;
    margin: 1.2vw 0;
    .userImg {
      margin-right: 1vw;
      img {
        width: 3vw;
        height: 3vw;
        border-radius: 50%;
      }
    }
    .commentContent {
      flex: 1;
      position: relative;
      p {
        transform: translate(0, -1vw);
        font-size: 1.2vw;
        color: #555;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5vw;
      }
      div {
        transform: translate(0, -1vw);
        font-size: 1.2vw;
        font-weight: 400;
      }
      .line3 {
        font-size: 0.88vw;
        margin-top: 0.5vw;
        color: rgb(148, 153, 181);
      }
      .publishs {
        margin-left: 2vw;
        color: rgb(148, 153, 181);
        margin-right: 2vw;
      }
    }
  }
}
.line-bottom {
  margin-left: 37vw;
  margin-bottom: 7vw;
  color: rgb(148, 153, 181);
}
</style>